<template>
	<view class="container">
		<view class="form-content">
			<view class="form-item cu-form-group">
				<view class="title">* 姓名</view>
				<input placeholder="请输入" name="input" class="text-r" v-model="name" />
			</view>
			<view class="form-item cu-form-group">
				<view class="title">* 手机号</view>
				<input placeholder="请输入" name="input" class="text-r" v-model="phone" type="number" />
			</view>
			<view class="form-item cu-form-group">
				<view class="title">* 身份证号</view>
				<input placeholder="请输入" name="input" class="text-r" v-model="card_number" />
			</view>
			<view class="form-item cu-form-group mt-10">
				<view class="title">性别</view>
				<picker v-if="sexData.length > 0" @change="sexDataChange" :value="index" :range="sexData" range-key="name">
					<view class="picker">
						{{sexCount}}
					</view>
				</picker>
			</view>
			<view class="form-item cu-form-group">
				<view class="title">民族</view>
				<input placeholder="请输入" name="input" class="text-r" v-model="folk_name" />
			</view>
			<view class="form-item cu-form-group">
				<view class="title">户籍地址</view>
				<input placeholder="请输入" name="input" class="text-r" v-model="census_address" />
			</view>
			<view class="form-item cu-form-group">
				<view class="title">身份证照片</view>
			</view>
			<view class="form-item cu-form-group upload-wrap grid pb-1">
				<view class="upload-content-item flex ccc pos-r upload-btn-icon" @tap="uploadImage('1')">
					<image class="upload-btn-icon" v-if="imgArr.length > 0" :src="cardfront" mode="widthFix" />
					<image class="upload-btn-icon" v-else :src="cardfront" mode="widthFix" />
					<image class="upload-camera pos-a upload-btn-icon" src="../../static/icon/icon_camera.png" mode="widthFix" />
				</view>
				<view class="upload-content-item flex ccc pos-r upload-btn-icon" @tap="uploadImage('2')">
					<!-- <sunui-upoos :upImgConfig="upImgOos" @onUpImg="upOosData" @onImgDel="delImgInfo" ref="uImage"></sunui-upoos> -->
					<image class="upload-btn-icon" v-if="imgArr.length > 0" :src="cardreverse" mode="widthFix" />
					<image class="upload-btn-icon" v-else :src="cardreverse" mode="widthFix" />
					<image class="upload-camera pos-a upload-btn-icon" src="../../static/icon/icon_camera.png" mode="widthFix" />
				</view>
			</view>
			<!-- <view class="form-item cu-form-group">
				<view class="title">所在地</view>
				<picker mode="region" @change="RegionChange" :value="region">
					<view class="picker">
						{{region[0]}}，{{region[1]}}，{{region[2]}}
					</view>
				</picker>
			</view> -->
			<!-- <view class="cu-form-group"> -->
			<!-- <view class="title">所在地</view>
				<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
				 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
				<view @tap="showMulLinkageThreePicker" class="address-sty">
					<text>{{address?address:"请选择"}}</text>
					<text class="cuIcon-right f-999"></text>
				</view> -->
			<!-- <picker mode="region" @change="RegionChange" :value="region">
					<view class="picker">
						{{region[0]}}，{{region[1]}}，{{region[2]}}
					</view>
				</picker> -->
			<!-- </view> -->
			<view class="form-item cu-form-group mt-10">
				<view class="title">籍贯</view>
				<input placeholder="请输入" name="input" class="text-r" v-model="native_place" />
			</view>
			<view class="form-item cu-form-group">
				<view class="title">通讯地址</view>
				<input placeholder="请输入" name="input" class="text-r" v-model="newsletter_address" />
			</view>
			<view class="form-item cu-form-group">
				<view class="title">紧急联系人</view>
				<input placeholder="请输入" name="input" class="text-r" v-model="emergency_contact" />
			</view>
			<view class="form-item cu-form-group">
				<view class="title">联系人关系</view>
				<input placeholder="请输入" name="input" class="text-r" v-model="contact_relationship" />
			</view>
			<view class="form-item cu-form-group">
				<view class="title">紧急联系电话</view>
				<input placeholder="请输入" name="input" class="text-r" v-model="contact_phone" type="number" />
			</view>
			<view class="form-item cu-form-group mt-10">
				<view class="title">人才级别</view>
				<picker v-if="level.length > 0" @change="levelChange" :value="index_level" :range="level" range-key="name">
					<view class="picker">
						{{levelCount}}
					</view>
				</picker>
			</view>
			<view class="form-item cu-form-group">
				<view class="title">简历来源/渠道</view>
				<picker v-if="channel.length > 0" @change="channelChange" :value="index1" :range="channel" range-key="name">
					<view class="picker">
						{{channelCount}}
					</view>
				</picker>
			</view>
			<view class="form-item cu-form-group">
				<view class="title">意向工作类型</view>
				<picker v-if="jobType.length > 0" @change="jobTypeChange" :value="index2" :range="jobType" range-key="name">
					<view class="picker">
						{{jobTypeCount}}
					</view>
				</picker>
			</view>

			<view class="form-item cu-form-group">
				<view class="title">是否特殊人群</view>
				<picker class="publish-item-con picker-item" @change="_onIsSpecialChange" :value="index_special" :range="radioArray"
				 range-key="name">
					<view class="picker-item-value picker">
						{{specialComputed}}
					</view>
				</picker>
			</view>

			<view class="form-item cu-form-group">
				<view class="title">求职意向</view>
			</view>
			<view class="form-item cu-form-group upload-wrap grid pb-1">
				<checkbox-group @change="positionCheckBoxChange" class="check-box-wrap flex-1 grid col-3">
					<block v-for="(item,index) in position_type" :key="index">
						<view class="checkbox-item flex rcs">
							<checkbox :value="item.position_type_id" :checked="item.checked" />
							<view class="check-title">{{item.position_type_name}}</view>
						</view>
					</block>
				</checkbox-group>
			</view>
			<view class="form-item cu-form-group mt-10">
				<view class="title">备注</view>
			</view>
			<view class="form-item cu-form-group upload-wrap grid pb-1">
				<view class="content-item-con">
					<textarea class="text-area-item" v-model="content" placeholder="请输入"></textarea>
				</view>
			</view>
		</view>
		<view class="btn-item submit-btn-item flex rcc" @tap="handleClickConfirm">
			<text class="btn-item-title">确定</text>
		</view>
	</view>
</template>
<script>
	import mpvueCityPicker from '../../components/mpvue-citypicker/mpvueCityPicker.vue'
	import aliOss from '../../components/ali-oos/ali-oos/index.js'
	export default {
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				page_flag: '',
				// 省市区选择
				cityPickerValueDefault: [0, 0, 0],
				themeColor: '#007AFF',
				pickerText: '',
				address: '',

				showChangeName: true,
				showName: false,
				id: '',
				imgArr: [],
				msg: '', //错误提示信息
				token: '', //存token
				// 往后台传的数据
				name: '', //姓名
				phone: '', //联系电话
				sex: '', //性别
				card_type: '', //证件类型
				card_number: '', //证件号码
				newsletter_address: '', //详细地址
				census_address: '', //籍贯
				channel_id: '', //简历来源
				idcard_one: '', //正面图片
				idcard_two: '', //反面图片
				jobType_id: '', //岗位类型
				province: '', //省
				city: '', //市
				area: '', //区
				native_place: '', //区
				// 图片地址
				cardfront: "../../static/icon/icon_card_front.png", //正面
				cardreverse: '../../static/icon/icon_card_reverse.png', //反面
				Images: this.Images,
				region: ['广东省', '广州市', '海珠区'],
				// 性别
				sexData: [],
				index: 0,
				sexName: '',
				// 渠道来源
				channel: [],
				index1: 0,
				channelName: '',
				// 意向岗位
				jobType: [],
				index2: 0,
				jobTypeName: '',
				emergency_contact: '',
				contact_relationship: '',
				contact_phone: '',
				folk_name: '',
				// 图片上传
				// imgList: [],
				index_special: 0,
				is_special: '',
				level_id: '',
				levelName: '',
				index_level: 0,
				level: [],
				position_type: [],
				position_type_value: [],
				content: '',
				radioArray: [{
						id: '',
						name: '请选择'
					},
					{
						id: 1,
						name: '是'
					},
					{
						id: 0,
						name: '否'
					},
				],
			}
		},
		async onLoad(option) {
			this.page_flag = option.page_flag;
			await this.reqSelectData();
			if (option.resume != undefined) {
				this.showChangeName = false;
				this.showName = true;
				let resume = JSON.parse(decodeURIComponent(option.resume));
				console.log('resume---->', resume);

				this.id = resume.id;
				this.name = resume.name;
				this.sexName = resume.sex_str;
				this.sex = resume.sex;
				this.phone = resume.phone;
				this.card_number = resume.card_number;
				this.newsletter_address = resume.newsletter_address;
				this.census_address = resume.census_address;
				this.native_place = resume.native_place;
				this.idcard_one = resume.short_image_one;
				this.cardfront = resume.image_one;
				this.idcard_two = resume.short_image_two;
				this.cardreverse = resume.image_two;
				this.channelName = resume.channel_name_str;
				this.jobTypeName = resume.job_wanted_str;
				this.folk_name = resume.folk_name || resume.folk_str;
				this.jobType_id = resume.job_wanted;
				this.emergency_contact = resume.emergency_contact;
				this.contact_relationship = resume.contact_relationship;
				this.contact_phone = resume.contact_phone;
				this.channel_id = resume.channel_id;
				this.level_id = resume.level_num;
				this.is_special = resume.is_special;
				this.position_type_str = resume.personnel_work_name_str;
				this.content = resume.content;
				this.index_special = resume.is_special > 0 ? 1 : 2;
				this.index1 = this.channel.findIndex(i => i.id == this.channel_id) > -1 ? this.channel.findIndex(i => i.id == this
					.channel_id) : 0;
				this.index2 = this.jobType.findIndex(i => i.id == this.jobType_id) > -1 ? this.jobType.findIndex(i => i.id == this
						.jobType_id) :
					0;
				this.index_level = this.level.findIndex(i => i.id == this.level_id) > -1 ? this.level.findIndex(i => i.id == this.level_id) :
					0;
				this.position_type.forEach(i => {
					this.position_type_str.forEach(j => {
						if (i.position_type_name == j) {
							i.checked = true;
						}
						return i;
					})
					return i;
				})
			}
			if (option.userInfoData != undefined) {
				let userInfoData = JSON.parse(decodeURIComponent(option.userInfoData));
				let cardFrontInfo = JSON.parse(decodeURIComponent(option.cardFrontInfo));
				if (option.cardReverseInfo) {
					let cardReverseInfo = JSON.parse(decodeURIComponent(option.cardReverseInfo));
					this.idcard_two = cardReverseInfo.name_server;
					this.cardreverse = cardReverseInfo.path_server;
				}
				console.log('userInfoData---->', userInfoData);
				console.log('cardFrontInfo---->', cardFrontInfo);
				this.name = userInfoData.姓名.words;
				this.sexName = userInfoData.性别.words;
				this.index = this.sexName == '男' ? 1 : this.sexName == '女' ? 2 : 0;
				this.sex = this.sexName == '男' ? 1 : this.sexName == '女' ? 2 : 0;
				this.card_number = userInfoData.公民身份号码.words;
				this.census_address = userInfoData.住址.words;
				this.folk_name = userInfoData.民族.words;
				this.idcard_one = cardFrontInfo.name_server;
				this.cardfront = cardFrontInfo.path_server;
			}


		},
		computed: {
			sexCount() {
				if (this.sexName) {
					return this.sexName
				} else {
					return this.index > 0 ? this.sexData[this.index].name : '请选择'
				}
			},
			levelCount() {
				if (this.levelName) {
					return this.levelName
				} else {
					return this.index_level > 0 ? this.level[this.index_level].name : '请选择'
				}
			},
			channelCount() {
				if (this.channelName) {
					return this.channelName
				} else {
					return this.index1 > 0 ? this.channel[this.index1].name : '请选择'
				}
			},
			jobTypeCount() {
				if (this.jobTypeName) {
					return this.jobTypeName
				} else {
					return this.index2 > 0 ? this.jobType[this.index2].name : '请选择'
				}
			},
			specialComputed() {
				if (this.is_special_str) {
					return this.is_special_str
				} else {
					return this.index_special > 0 ? this.radioArray[this.index_special].name : '请选择'
				}
			},
		},
		methods: {
			positionCheckBoxChange(e) {
				uni.hideKeyboard();
				let value = e.detail.value;
				console.log('e.detail---->', e.detail);
				this.position_type_value = value;
			},
			_onIsSpecialChange(e) {
				uni.hideKeyboard();
				let value = e.detail.value;
				this.index_special = value;
				this.is_special = this.radioArray[value].id;
			},
			// 性别
			sexDataChange(e) {
				uni.hideKeyboard();
				this.sexName = '';
				this.index = e.detail.value
				this.sex = this.sexData[this.index].id
			},
			// 性别
			levelChange(e) {
				uni.hideKeyboard();
				this.levelName = '';
				this.index_level = e.detail.value
				this.level_id = this.level[this.index_level].id
			},
			// 简历来源
			channelChange(e) {
				uni.hideKeyboard();
				this.channelName = '';
				this.index1 = e.detail.value
				this.channel_id = this.channel[this.index1].id
			},
			jobTypeChange(e) {
				uni.hideKeyboard();
				this.jobTypeName = '';
				this.index2 = e.detail.value
				this.jobType_id = this.jobType[this.index2].id
			},
			RegionChange(e) {
				uni.hideKeyboard();
				this.region = e.detail.value
			},
			onCancel(e) {
				// console.log(e)
			},
			// 三级联动选择
			showMulLinkageThreePicker() {
				// console.log("zhixinglema")
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e) {
				this.pickerText = JSON.stringify(e)
				// console.log(this.pickerText)
				// console.log(e.label)
				this.address = e.label;
				// console.log(e.label.split('-'))
				this.region = e.label.split('-')
				// let regionNow = e.label.split('-')
				this.province = this.region[0] //省
				this.city = this.region[1] //市
				this.area = this.region[2] //区
				// console.log(this.region)
			},
			async uploadImage(type) {
				let options = {
					count: 1,
					// sourceType
				}
				let res = await aliOss.chooseImage(options);
				if (res.code === 1) {
					let up_res = await aliOss.uploadImage(res.data);
					if (up_res.code === 1) {
						let {
							data
						} = up_res;
						if (type == 1) {
							this.cardfront = data[0].path_server;
							this.idcard_one = data[0].name_server;
							this.getCardInfo();
						} else if (type == 2) {
							this.cardreverse = data[0].path_server;
							this.idcard_two = data[0].name_server
						}
					}
				}
			},
			async getCardInfo() {
				let url = this.ServicesApi.getIdCardDetail;
				let data = {
					license: this.cardfront
				};
				if (!this.idcard_one) {
					uni.showToast({
						icon: 'none',
						title: '请上传身份证正面照片',
					});
					return;
				}
				uni.showLoading({
					title: '识别中...'
				});
				let result = await this.Services.post(url, data);
				uni.hideLoading();
				if (result.code == this.StatusCode.SUCCESS_CODE) {
					uni.showToast({
						icon: 'none',
						title: '识别成功',
					});
					let userInfoData = result.data;
					this.name = userInfoData.姓名.words;
					this.sexName = userInfoData.性别.words;
					this.index = this.sexName == '男' ? 1 : this.sexName == '女' ? 2 : 0;
					this.sex = this.sexName == '男' ? 1 : this.sexName == '女' ? 2 : 0;
					this.card_number = userInfoData.公民身份号码.words;
					this.census_address = userInfoData.住址.words;
					this.folk_name = userInfoData.民族.words;
				} else {
					uni.showToast({
						icon: 'none',
						title: '身份证识别失败，请重试',
					});
				}
			},
			getToken() {
				// 取token
				try {
					const value = uni.getStorageSync('login_key');
					if (value) {
						this.token = value;
					}
				} catch (e) {
					// error
				}
			},
			// 确认添加人才
			async handleClickConfirm() {
				// uni.switchTab({
				// 	url: "/pages/talent_pool/index",
				// })
				// return;
				var pages = getCurrentPages();
				var currPage = pages[pages.length - 1]; //当前页面
				var prevPage = pages[pages.length - 2]; //上一个页面
				//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
				prevPage && prevPage.setData && prevPage.setData({
					isDoRefresh: true
				});
				// 发请求
				let url = this.ServicesApi.personnelEdit;
				let data = {
					id: this.id || '',
					name: this.name,
					sex: this.sex,
					phone: this.phone,
					card_type: 1,
					card_number: this.card_number,
					newsletter_address: this.newsletter_address,
					census_address: this.census_address,
					native_place: this.native_place,
					channel_id: this.channel_id,
					idcard_one: this.idcard_one,
					idcard_two: this.idcard_two,
					job_wanted: this.jobType_id,
					province: this.province, //省
					city: this.city, //市
					area: this.area, //区
					folk_name: this.folk_name, //区
					is_special: this.is_special, //区
					emergency_contact: this.emergency_contact, //区
					contact_relationship: this.contact_relationship, //区
					contact_phone: this.contact_phone, //区
					content: this.content, //区
					level: this.level_id,
					position_type_value: this.position_type_value,
				};
				console.log('data---->', data);
				if (this.name == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入姓名'
					});
					return false;
				} else if (this.phone == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号'
					});
					return false;
				} else if (this.card_number == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入证件号码'
					});
					return false;
				}

				let result = await this.Services.post(url, data);
				if (result.code == this.StatusCode.SUCCESS_CODE) {
					// if (this.page_flag == 'detail') {
						uni.showToast({
							icon: 'none',
							title: result.msg,
						});
						let pages = getCurrentPages();
						let currPage = pages[pages.length - 1]; //当前页面
						let prevPage = pages[pages.length - 2]; //上一个页面
						//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
						prevPage && prevPage.setData && prevPage.setData({
							isDoRefresh: true
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
								animationType: 'pop-out',
								animationDuration: 200
							});
						}, 1500);
					// } else {
					// 	uni.redirectTo({
					// 		url: "/pages/talent_pool/index",
					// 	});
					// }
				} else {
					uni.showToast({
						icon: 'none',
						title: result.msg,
					});
				}
			},
			// 请求选择数据
			async reqSelectData() {
				// 发请求
				let url = this.ServicesApi.personneloption;
				let data = {
					id: this.id,
				};
				let result = await this.Services.post(url, data);
				if (result.code == this.StatusCode.SUCCESS_CODE) {
					this.jobType = result.data.job_wanted;
					this.channel = result.data.channel_list;
					this.sexData = result.data.sex;
					this.level = result.data.level;
					this.position_type = result.data.position_type;
				}

			},
		},
		mounted() {

		}
	}
</script>

<style scoped>
	.container {
		padding-bottom: 50rpx;
	}

	.address-sty {
		/* background:#007AFF; */
		font-size: 30upx;
		margin-right: 20upx;
		color: #666;
		min-width: 450upx;
		text-align: right;
	}

	.set-margin {
		padding-top: 40upx;
	}

	.hint-msg {
		height: 30upx;
		font-size: 28upx;
		color: red;
	}

	.radio {
		width: 20upx;
		height: 20upx;
	}

	.upload-wrap {
		border-top: 0;
	}

	.upload-btn-icon {
		width: 260upx;
		height: 160upx;
	}

	.content-item-con {
		flex: 1;
		padding: 20rpx;
		margin-top: 16rpx;
		min-height: 160rpx;
		background: #F9F9F9;
	}

	.text-area-item {
		padding: 0 10rpx;
		margin: 0;
		width: auto;
		height: auto;
		min-height: 160rpx;
	}

	.upload-camera {
		width: 80upx;
		height: 80upx;
	}

	.submit-btn-item {
		width: 600upx;
		height: 80upx;
		color: #FFFFFF;
		font-size: 30upx;
		border-radius: 4upx;
		margin: 100upx auto;
		background: linear-gradient(270deg, rgba(0, 106, 231, 1) 0%, rgba(66, 157, 255, 1) 100%);
	}
</style>
